<template>
  <div class="app-container">
    <el-card>
      <div>
        <el-button style="margin:0 0 10px 0" type="primary" size="small" @click="handleAddCity">添加城市</el-button>
        <el-table v-loading="listLoading" :data="tableData.data" size="mini"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id" lazy :load="load" border>
          <el-table-column label="编号" prop="areaCode"></el-table-column>
          <el-table-column label="地区名称" prop="name"></el-table-column>
          <el-table-column label="上级地区" prop="parentName"></el-table-column>
          <el-table-column label="经度" prop="lon"></el-table-column>
          <el-table-column label="纬度" prop="lat"></el-table-column>
          <el-table-column label="简写" prop="simplePy"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)"
                v-if="scope.row.id !== 999999">编辑</el-button>
              <el-button size="mini" type="text" v-if="scope.row.level !== 3 && scope.row.id != 999999"
                @click="handleAdd(scope.$index, scope.row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="areaInfo" :model="areaInfo" label-width="100px" size="mini">
        <el-form-item label="上级地区: ">
          <el-input disabled v-model="areaInfo.parentName" />
        </el-form-item>
        <el-form-item label="地区名称: ">
          <el-input v-model="areaInfo.name" />
        </el-form-item>
        <el-form-item label="地区编号: ">
          <el-input v-model="areaInfo.areaCode" />
        </el-form-item>
        <el-form-item label="经度: ">
          <el-input v-model="areaInfo.lon" />
        </el-form-item>
        <el-form-item label="纬度: ">
          <el-input v-model="areaInfo.lat" />
        </el-form-item>
        <el-form-item label="拼音: ">
          <el-input v-model="areaInfo.pinYin" />
        </el-form-item>
        <el-form-item label="简写: ">
          <el-input v-model="areaInfo.simplePy" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getAreaList, editArea, addArea } from "@/api/area";
export default {
  name: "index",
  data() {
    return {
      parentId: 0,
      listLoading: false,
      tableData: {
        data: []
      },
      areaInfo: {},
      dialogVisible: false
    };
  },
  methods: {
    handleAddCity() {
      this.areaInfo = {
        parentId: 0,
        parentName: "中国"
      };
      this.dialogVisible = true;
    },
    handleSubmit() {
      let that = this;
      this.areaInfo.id
        ? this.$confirm("是否要修改该地区", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          editArea(this.areaInfo).then(res => {
            this.dialogVisible = false;
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 1000
            });
            that.getCityList();
          });
        })
        : this.$confirm("是否要添加该地区", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = Object.assign({}, this.areaInfo);
          delete params.parentName;
          addArea(this.areaInfo).then(res => {
            this.dialogVisible = false;
            this.$message({
              message: "添加成功",
              type: "success",
              duration: 1000
            });
            that.getCityList();
          });
        });
    },
    handleEdit(idx, v) {
      this.areaInfo = v;
      this.dialogVisible = true;
    },
    handleAdd(idx, v) {
      this.areaInfo = {
        parentId: v.id,
        parentName: v.name
      };
      this.dialogVisible = true;
    },
    load(tree, treeNode, resolve) {
      getAreaList(tree.id).then(data => {
        let arr = [];
        data.data.forEach(item => {
          let str = {};
          str = item;
          str.hasChildren = true;
          str.parentName = tree.name;
          this.parentName = tree.name;
          if (item.level !== 3) {
            str.children = [];
            str.hasChildren = true; //当节点为三级时，不可展开
          } else {
            str.hasChildren = false;
          }
          arr.push(str);
        });
        resolve(arr);
      });
    },
    getCityList() {
      this.listLoading = true;
      getAreaList(this.parentId).then(res => {
        let arr = [];
        res.data.forEach(v => {
          let str = {};
          str = v;
          if (v.id !== 999999) {
            str.hasChildren = true;
            str.parentName = "中国";
          }
          str.children = [];
          arr.push(str);
        });
        this.tableData.data = arr;
        this.listLoading = false;
      });
    }
  },
  created() {
    this.getCityList();
  }
};
</script>

<style scoped lang="scss"></style>
